<template>
  <div>
    <el-dialog
      title="批量导入"
      :visible.sync="dialogVisible"
      width="35%">
      <div style="width: 100%;margin: 0px auto;">
        <dl>
          <dt><h3>步骤一、 选择上传文件类型</h3></dt>
          <dd>
            为了保证导入成功，请使用数据模板文件。
          </dd>
        </dl>
        <div v-if="options && options.length > 0">
          类型：
          <el-select ref="type" v-model="type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="height: 36px;">
          <el-button v-if="modelInfo" @click="downLoadTemplate" type="primary" style="float: right">下载通用模板</el-button>
        </div>
        <dl>
          <dt><h3>步骤二、 上传数据文件</h3></dt>
          <dd>
            上传数据文件，目前支持的文件类型为（*.xls、*.xlsx）。<br>
            注意：只有第一个sheet表中的数据会被读取到。
          </dd>
        </dl>
        <div>
          <slot :params="params"></slot>
        </div>
        <div style="height: 76px;">
          <el-upload style="float: right"
                     class="upload-demo"
                     ref="upload"
                     :limit="1"
                     accept=".xls,.xlsx"
                     :action="baseUrl+url+'?token='+token+'&type='+type+'&'+urlParams"
                     :on-success="successHandle"
                     :multiple="false"
                     :auto-upload="false"
                     :file-list="fileList">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
          </el-upload>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Loading} from 'element-ui'
import axios from 'axios'
import Vue from 'vue'
import {stringify} from 'qs'

export default {
  data () {
    return {
      token: Vue.cookie.get('token'),
      baseUrl: axios.BASE_URL,
      fileList: [],
      dialogVisible: false,
      modelInfo: [{titles: [], fileName: '模板', data: [[]]}],
      url: '',
      type: 0,
      options: [],
      params: {},
      urlParams: ''
    }
  },
  watch: {
		params: {
			handler(newVal, oldVal) {
				if(newVal) {
          this.urlParams = stringify(newVal)
				}
			},
			deep:true, // 深度监听
			immediate:true, // 初始化监听
		}
	},
  methods: {
    /**
     *
     * @param url 提交地址 （不能为空）
     * @param modelInfo 模板下载信息 类型为数组或者对象  （可以为空）  例如： {1:{titles:['name','age'],data:[['hch','21'],fileName:'模板名称']}}
     *                  注意： modelInfo 的 key 和 options 的 modelkey 之间 必须有关联关系
     * @param options 用于区分上传文件的类型，也用于下载不同的模板。 点击下载时会通过 modelkey 下载对应的模板，如果 modelkey 为空则下载默认的模板。 （可以为空）
     */
    init (url, modelInfo, options, type) {
      if (!url) {
        alert('参数错误！ URL不能为空')
        return
      }
      this.url = url
      this.modelInfo = modelInfo
      this.dialogVisible = true
      this.options = options
      if (options || type) {
        this.$nextTick(() => {
          if (type) {
            this.type = type
          } else {
            this.type = options[0].value
          }
        })
      }
    },
    // 下载导入模板
    downLoadTemplate () {
      const {export_json_to_excel} = require('../../excel/Export2Excel')
      let modelInfo = null
      let modelType = this.modelInfo instanceof Array
      if (this.$refs.type && this.$refs.type.hoverIndex !== -1) {
        // 获取类型对应的模板
        modelInfo = modelType || !this.options[this.$refs.type.hoverIndex].modelkey ? this.modelInfo[this.type] : this.modelInfo[this.options[this.$refs.type.hoverIndex].modelkey]
      }
      if (!modelInfo) {
        // 设置默认的模板
        modelInfo = modelType ? this.modelInfo[0] : this.modelInfo['default']
        if (!modelInfo) {
          this.$message({
            message: '模板配置有误！',
            type: 'error',
            duration: 1500
          })
          return
        }
      }
      export_json_to_excel([modelInfo.titles], [modelInfo.data], modelInfo.fileName)
    },
    // 上传成功
    successHandle (response, file, fileList) {
      this.loading.close()
      this.fileList = []
      if (response && response.code === 0) {
        if (this.num === this.successNum) {
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            this.dialogVisible = false
          })
        }
      } else {
        this.$message.error(response.msg)
      }
    },
    // 文件上传
    submitUpload () {
      if (this.$refs.upload.uploadFiles.length < 1) {
        this.$message({
          message: '请选择文件',
          type: 'error',
          duration: 1500
        })
        return
      }
      this.urlParams = stringify(this.params)
      this.loading = Loading.service({
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$refs.upload.submit()
    }
  }
}
</script>
